<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: HeAo
 * @LastEditTime: 2021-11-26 17:49:52
-->
<template>
  <div class="home">
    <!-- 头部区域 -->
    <div class="header">
      <div class="containor">
        <div class="name">
          <img
            src="../assets/Huaihua University International Office.png"
            alt="图片丢失"
            width="1440px"
            height="165px"
          />
        </div>
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index">
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 分割线 -->
      <el-divider></el-divider>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 学生风采模块 -->
      <div class="studentElegent">
        <div
          class="stuEleCard"
          v-for="(item, index) in stuElegent"
          :key="index"
        >
          <div>
            <img :src="item.cover" alt="图片丢失" height="250px" />
          </div>
          <div class="cardText">
            <div class="eleCardTitle">{{ item.title }}</div>
            <div class="eleCardDatetime">{{ item.publishTime }}</div>
            <div class="eleCardUser">{{ item.baseUser.realname }}</div>
            <div class="eleCardNum">
              <svg
                t="1637928144603"
                class="icon"
                viewBox="0 0 1155 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9558"
                width="29"
                height="29"
              >
                <path
                  d="M846.214874 208.961484A68.763923 68.763923 0 1 0 915.563193 277.725406a68.763923 68.763923 0 0 0-68.763923-68.763922z"
                  fill="#FF517F"
                  opacity=".3"
                  p-id="9559"
                ></path>
                <path
                  d="M574.275962 1023.999026a149.605362 149.605362 0 0 1-104.412075-42.076508l-37.790938-36.427347L292.20752 810.889305c-9.739932-9.350335-38.95973-44.219293-98.762914-114.152007l-31.167784-36.622146c-16.557885-19.479865-118.437578-164.020461-129.346302-187.591098A327.06693 327.06693 0 0 1 0.009548 327.009464a48.699662 48.699662 0 1 1 97.399324 6.038758 242.524317 242.524317 0 0 0 24.349831 98.762915c8.960738 16.947482 99.736908 148.046972 113.957209 164.21526l32.141777 37.596139c27.077012 31.946978 82.789425 98.373317 92.334559 106.944457l139.475832 134.411067 37.790938 36.427348a52.985232 52.985232 0 0 0 74.023486 0c36.622146-34.284562 123.502343-136.359053 165.384052-186.032709l15.389093-18.311073c29.219797-34.284562 90.386573-104.606874 90.386573-104.606874l73.43909 63.893957s-59.997984 70.127513-89.802177 104.412075l-15.194294 17.921475c-64.088755 75.387077-135.38506 158.955697-172.786401 194.798648a152.332543 152.332543 0 0 1-104.022478 40.518119z"
                  fill="#FF517F"
                  p-id="9560"
                ></path>
                <path
                  d="M48.70921 368.501576A48.699662 48.699662 0 0 1 0.009548 319.801914C0.009548 148.768701 139.290581 8.708474 316.946948 0.332132c74.997479-3.506376 218.95368 19.479865 285.574818 130.320295a48.699662 48.699662 0 1 1-83.179023 50.842447C479.214222 115.458133 378.892918 95.58867 321.232519 97.731456 193.639404 103.770214 97.408872 199.026752 97.408872 319.801914a48.699662 48.699662 0 0 1-48.699662 48.699662zM928.614702 670.244682a48.504863 48.504863 0 0 1-37.40134-79.672647c43.050501-52.206038 91.750163-112.204021 97.399324-122.138753l4.869966-4.480368c58.439594-72.270298 100.126505-188.175494 21.62265-276.61408-94.477344-105.775666-218.174486-76.945466-283.626831-50.647649a48.699662 48.699662 0 1 1-36.622146-90.191774C846.79927-14.862163 989.781478 12.799245 1087.3756 122.665683s88.828183 269.40653-17.726677 401.285214c-14.4151 20.648657-70.127513 88.438586-103.438082 128.567108a48.504863 48.504863 0 0 1-37.596139 17.726677z"
                  fill="#FF517F"
                  p-id="9561"
                ></path>
              </svg>
              <span style="margin-left: 5px">{{ item.thumpUp }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!--通知公告区域-->
      <h1>通知公告</h1>
      <div class="NoticeAnnouncement">
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1299.htm" target="_blank">《关于开展怀化学院2022年度国（境）外交流与合作计划申报工作的通知》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1267.htm" target="_blank">《关于拟选派2021年广外秋季班出国留学英语培训人员的公示》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1060.htm" target="_blank">《关于申报2021年国家公派留学地方合作项目的通知》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1059.htm" target="_blank">《关于做好我校2021年国家公派出国留学面上项目申报工作的通知》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1058.htm" target="_blank">《关于拟选派2021年广外春季班出国留学英语培训人员的公示》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1057.htm" target="_blank">《关于组织我校教师参加2021年广外出国英语春季班培训的通知》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/info/1139/1056.htm" target="_blank">《关于2020-2021学年度长期外籍教师聘请的公示》 </a></li>
        <li><a href="http://jlc.hhtc.edu.cn/index/tzgg.htm" target="_blank">《更多》 </a></li>
      </div>
    </div>  
  </div>
</template>

<script>
// 导入请求工具
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      categories: [],
      carousel: [],
      projects: [],
      stuElegent: [],
    };
  },
  methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    // 查询所有轮播图
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    // 查询所有游学项目信息
    findAllProjects() {
      get("/index/project/pageQuery", { page: 1, pageSize: 100 }).then(
        (res) => {
          this.projects = res.data.list;
        }
      );
    },
    // 查询所有学生风采信息
    findAllStudentElegents() {
      get("/index/article/pageQuery", { page: 1, pageSize: 100 }).then(
        (res) => {
          this.stuElegent = res.data.list;
        }
      );
    },
    // 游学项目卡片点击事件
    cardClickHander(id) {
      // 点击项目卡片，跳转至目标页面
      // 通过query属性携带参数，参数会以查询字符串的形式，拼接到url地址栏后面
      this.$router.push({ path: "/project", query: { id } });
    },
  },
  // vue组件的生命周期钩子函数
  created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    // 调用查询所有轮播图的方法
    this.findAllCarousel();
    // 调用查询所有项目信息的方法
    this.findAllProjects();
    // 调用查询所有学生风采信息的方法
    this.findAllStudentElegents();
  },
};
</script>

<style scoped>
.header {
  /* display: flex; */
  height: 270px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  /* width: 1920px;
  height: 130px; */
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  position: relative;
  top: 90px;
  left: 22px;
  float: left;
  display: flex;
  margin:  0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 44px;
  color: #666;
}
.eleCardTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 30px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.content {
  padding: 0 100px;
  margin-top: 50px;
}
.projectCard {
  height: 200px;
  line-height: 200px;
  border-radius: 5px;
  display: flex;
  box-shadow: 0 0 5px 5px rgba(202, 200, 200, 0.178);
  margin-bottom: 20px;
  cursor: pointer;
}
.cardRight {
  padding-left: 1em;
  font-family: "微软雅黑";
}
.cardTitle {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #666;
  font-weight: bold;
}
.cardDatetime {
  height: 50px;
  line-height: 50px;
}
.NoticeAnnouncement {
  height: 40px;
  line-height: 40px;
}
.studentElegent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: space-between; */
}
.stuEleCard {
  flex-basis: 24%;
  width: 250px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-right: 10px;
}
.stuEleCard:hover {
  box-shadow: 0 0 5px 5px #d4d3d386;
}
.stuEleCard img {
  width: 100%;
  border-radius: 5px;
}
.cardText {
  padding: 1em;
  font-family: "微软雅黑";
  line-height: 40px;
  background-color: #ededed8c;
  height: 200px;
}
</style>